<template>
	<view class="pages" >
		<!-- 轮播图 Start -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-active-color='#3fcdff' indicator-color="#bfeeff" class="swiper-wapper-box">
			<swiper-item class="swiper-box" v-for="(swImage,index) in swiperList" :key='index'>
				<image :src="swImage.image" mode="widthFix" class="swiperImage"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->

		<!-- 热门超英开始 -->
		<view class="hot-title">
			<view class="hot-title-icon">
				<image src="../../static/icos/hot.png" mode="widthFix" class="hot-title-icon-image"></image>
			</view>
			<view class="hot-title-text">
				热门超英
			</view>
		</view>
		<scroll-view scroll-x="true" class="backcolor">
			<view class="hot-pictures-wapper">
				<view class="hot-pictures-box" v-for="(item,index) in hotList" :key="index">
					<view class="hot-pictures-image-box">
						<image :src="item.cover" mode="widthFix" class="hot-pictures-image"></image>
					</view>
					<view class="hot-pictures-text">
						{{item.name}}
					</view>
					<Starts :startNumber="item.score" :isShow="1"></Starts>
				</view>
			</view>
		</scroll-view>
		<!-- 热门超英结束 -->

		<!-- 热门预告开始 -->
		<view class="hot-title">
			<view class="hot-title-icon">
				<image src="../../static/icos/interest.png" mode="widthFix" class="hot-title-icon-image"></image>
			</view>
			<view class="hot-title-text">
				热门预告
			</view>
		</view>
		<view class="video-wapper">
			<view class="video-box" v-for="(item,index) in hotNotice" :key="index">
				<video class="videoWH" :poster="item.poster" :src="item.trailer" controls>
				</video>
			</view>
		</view>
		<!-- 热门预告结束 -->

		<!-- 猜你喜欢开始 -->
		<view class="hot-title">
			<view class="hot-title-icon">
				<image src="../../static/icos/guess-u-like.png" mode="widthFix" class="hot-title-icon-image"></image>
			</view>
			<view class="hot-title-text">
				猜你喜欢
			</view>
		</view>
		<view class="youLick-wapper" v-for="(item,index) in youLick" :key="index">
			<view class="youlick-image">
				<image class="youLickImage" :src="item.cover" mode="widthFix"></image>
			</view>
			<view class="youLick-texts">
				<view class="youLick-title">
					{{item.name}}
				</view>
				<Starts :startNumber="8" :isShow="0"></Starts>
				<view class="youLike-film">
					{{item.basicInfo}}
				</view>
				<view class="youLike-time">
					{{item.releaseDate}}
				</view>
			</view>
			<view class="youLick-right" @click="handleClick" :data-gIndex="index">
				<view class="youLick-right-icon">
					<image src="../../static/icos/praise.png" class="youLick-icon" mode="widthFix"></image>
				</view>
				<view class="youLick-text">
					赞一下
				</view>
				<view class="add" :animation="animationDataArr[index]">
					+1
				</view>
			</view>
		</view>
		<!-- 猜你喜欢结束 -->
	</view>
</template>

<script>
	import Starts from '../../components/Starts.vue'
	export default {
		
		components: {
			Starts
		},
		data() {
			return {
				//轮播图数组
				swiperList: [],
				//热门超英数组
				hotList: [],
				//热门预告超英数组
				hotNotice: [],
				//动画对象存储
				animation: {},
				animationDataArr: [{}, {}, {}, {}, {}],
				//猜你喜欢数组
				youLick: [],
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				mask: true,
				title: "加载中"
			})
			this.swiperList = [],
			this.hotList = [],
			this.hotNotice = [],
			this.youLick = []
			this.getSwiperList(),
			this.getHotList(),
			this.getYouLickList(),
			this.gethotNoticeList()
		},
		methods: {
			handleClick(e) {
				var gIndex = e.currentTarget.dataset.gindex
				//创建一个临时动画
				var animation = uni.createAnimation()
				this.animation = animation.translateY(-60).opacity(1).step({
					duration: 1000
				})
				this.animationDataArr[gIndex] = this.animation.export()

				setTimeout(function() {
					animation.translateY(0).opacity(0).step({
						duration: 0
					})
					this.animationData = this.animation
					this.animationDataArr[gIndex] = this.animation.export()
				}.bind(this), 1500)
			},

			//轮播图数据获取方法
			getSwiperList() {
				//将vue原型中的url地址赋值
				var listUrl = this.ListUrl
				//请求轮播图数据
				uni.request({
					//进行拼串
					url: listUrl + 'index/carousel/list?qq=lee15953571',
					//请求方式为POST
					method: 'POST',
					//请求成功返回
					success: (res) => {
						//将返回的数据赋值给定义好的空数组
						this.swiperList = res.data.data
					},
					//请求报错输出
					fail: err => {
						console.log(err)
					},
					complete() {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},

			//获取热门超英列表数据方法
			getHotList() {
				//将vue原型中的url地址赋值
				var listUrl = this.ListUrl
				//请求热门超英列表数据
				uni.request({
					//进行拼串
					url: listUrl + 'index/movie/hot?type=superhero&qq=lee15953571',
					//请求方式为POST
					method: 'POST',
					//请求成功返回
					success: (res) => {
						//将返回的数据赋值给定义好的空数组
						this.hotList = res.data.data
					},
					//请求报错输出
					fail: err => {
						console.log(err)
					},
					complete() {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			//获取请求热门超英预告列表数据方法
			gethotNoticeList() {
				//将vue原型中的url地址赋值
				var listUrl = this.ListUrl
				//请求热门超英预告列表数据
				uni.request({
					//进行拼串
					url: listUrl + 'index/movie/hot?type=trailer&qq=lee15953571',
					//请求方式为POST
					method: 'POST',
					//请求成功返回
					success: (res) => {
						//将返回的数据赋值给定义好的空数组
						this.hotNotice = res.data.data

					},
					//请求报错输出
					fail: err => {
						console.log(err)
					},
					complete() {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},

			//获取猜你喜欢数据方法
			getYouLickList() {
				//将vue原型中的url地址赋值
				var listUrl = this.ListUrl
				//请求参你喜欢列表数据
				uni.request({
					//进行拼串
					url: listUrl + 'index/guessULike?qq=lee15953571',
					//请求方式为POST
					method: 'POST',
					//请求成功返回
					success: (res) => {
						//将返回的数据赋值给定义好的空数组
						this.youLick = res.data.data

					},
					//请求报错输出
					fail: err => {
						console.log(err)
					},
					complete() {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			}
		},
		onUnload() {
			this.animation = {}
			this.animationDataArr = [{}, {}, {}, {}, {}]
		},
		/* 页面加载完毕生命周期，只执行一次 */
		onLoad() {
			this.getSwiperList(),
			this.getHotList(),
			this.getYouLickList(),
			this.gethotNoticeList()
		}
	}
</script>

<style>
	/* 轮播图样式开始 */
	/* 轮播图外层容器大小设置 */
	.swiper-wapper-box {
		width: 100%;
		height: 424rpx;
	}

	/* 让轮播图中的图片继承外部容器的大小 */
	.swiper-box {
		width: 100%;
		height: 100%;
	}

	.swiperImage {
		width: 100%;
		height: 100%;
	}

	/* 轮播图样式结束 */

	/* 热门超英开始 */
	/* 超英头部盒子格式设置 */
	.hot-title {
		background-color: #FFFFFF;
		display: flex;
		margin-top: 15rpx;
		padding: 20rpx;
	}

	/* 超英预告图标大小设置 */
	.hot-title-icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hot-title-icon-image {
		width: 28rpx;
		height: 34rpx;
	}

	/* 超英预告字体设置 */
	.hot-title-text {
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}

	/* 热门超英图片列表设置 */
	.backcolor {
		background-color: #FFFFFF;
	}

	.hot-pictures-wapper {
		width: 100%;
		display: flex;
		background-color: #FFFFFF;
	}

	/* 外层盒子大小设置 */
	.hot-pictures-box {
		display: flex;
		flex-direction: column;
		width: 200rpx;
		padding: 0rpx 0rpx 8rpx 20rpx;
	}

	/* 图片大小设置 */
	.hot-pictures-image {
		width: 200rpx;
		height: 270rpx;
	}

	/* 超英列表文字设置 */
	.hot-pictures-text {
		font-size: 28rpx;
		font-weight: 600;
		/* 一行超出省略 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 热门超英结束 */

	/* 热门预告开始 */
	/* 设置外部弹性盒样式 */
	.video-wapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 20rpx;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	/* 设置视频大小 */
	.videoWH {
		width: 350rpx;
		height: 220rpx;
	}

	/* 热门预告结束 */

	/* 猜你喜欢开始 */
	.youLick-wapper {
		display: flex;
		padding: 0 20rpx;
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	/* 图片容器大小 */
	.youlick-image {
		width: 180rpx;
		height: 240rpx;
	}

	/* 图片大小 */
	.youLickImage {
		width: 100%;
		border-radius: 3%;
	}

	/* 中间容器大小设置 */
	.youLick-texts {
		padding: 0 15rpx;
		width: 358rpx;
	}

	.youLick-title {
		font-size: 36rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.youLike-film {
		font-size: 28rpx;
		color: grey;
	}

	.youLike-time {
		font-size: 28rpx;
		color: grey;
	}

	/* 右侧容器大小*/
	.youLick-right {
		width: 144rpx;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left: dashed 2px #dbdbda;
	}

	.youLick-icon {
		width: 40rpx;
	}

	.youLick-text {
		color: #feab2a;
		font-size: 28rpx
	}

	.add {
		color: #feab2a;
		opacity: 0;
	}


	/* 猜你喜欢结束 */
</style>
